<template>
  <div class="con_box">
    <div class="com_title">联系人信息</div>
    <div class="contactbox">
      <div
        class="contactItem flex"
        v-if="dataSource.customerName || dataSource.mobile"
      >
        <div class="contact_lt">
          <div class="header flex">
            <div class="txt">客户</div>
            <div class="name">
              {{ dataSource.customerName ? dataSource.customerName : '-' }}
            </div>
          </div>
          <div class="tel">
            {{ dataSource.mobile ? dataSource.mobile : '-' }}
          </div>
        </div>
        <div class="contact_rt" v-if="dataSource.mobile">
          <a @click="handleTel(dataSource.mobile)">
            <i class="iconfont icon-tel"></i>
          </a>
          <i class="iconfont icon-wx"></i>
        </div>
      </div>
      <div
        class="contactItem flex"
        v-if="dataSource.ownerName || dataSource.ownerPhone"
      >
        <div class="contact_lt">
          <div class="header flex">
            <div class="txt">车主</div>
            <div class="name">
              {{ dataSource.ownerName ? dataSource.ownerName : '-' }}
            </div>
          </div>
          <div class="tel">
            {{ dataSource.ownerPhone ? dataSource.ownerPhone : '-' }}
          </div>
        </div>
        <div class="contact_rt" v-if="dataSource.ownerPhone">
          <a @click="handleTel(dataSource.ownerPhone)">
            <i class="iconfont icon-tel"></i>
          </a>
          <i class="iconfont icon-wx"></i>
        </div>
      </div>
      <div
        class="contactItem flex"
        v-if="dataSource.contactPeople || dataSource.contactPhone"
      >
        <div class="contact_lt">
          <div class="header flex">
            <div class="txt">送修人</div>
            <div class="name">
              {{ dataSource.contactPeople ? dataSource.contactPeople : '-' }}
            </div>
          </div>
          <div class="tel">
            {{ dataSource.contactPhone ? dataSource.contactPhone : '-' }}
          </div>
        </div>
        <div class="contact_rt" v-if="dataSource.contactPhone">
          <a @click="handleTel(dataSource.contactPhone)">
            <i class="iconfont icon-tel"></i>
          </a>
          <i class="iconfont icon-wx"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Empty,
  Field,
  Form,
  Uploader,
  DatetimePicker,
  Tab,
  Tabs,
} from 'vant'
import taskApi from '@/api/taskApi'
import { isPhone } from '@/utils/util.js'

export default {
  name: 'userInfo',
  components: {
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    Tab,
    Tabs,
  },
  data() {
    return {
      showTimerPicker: false,
      dataSource: {
        id: '', //单车id
        vinCode: '', //车架号
        fixCenterId: '', //维修中心ID
        fixCenterName: '', //维修中心名称
        fixCenterNumber: '', //维修中心编码
        serverPsnId: '', //所属服务顾问ID
        serverPsnName: '', //所属服务顾问名字
        serverPsnNumber: '', //所属服务顾问编码
        carModelId: '', //车型ID
        carModelName: '', //车型名称
        carModelNumber: '', //车型编码
        lastIn: '', //上次进场时间
        carMile: '', //行驶里程数
        deliverTime: '', //购车时间
        inusuranceDate: '', //保险到期时间
        repairtime: '', //保修到期时间
        label: [], //标签
      },
      uploader: [],
      columns: [],
      showSelectPicker: false,
      disabled: false,
      billId: '',
      tabActive: 0,
      cardList: [], //卡券列表
    }
  },
  props: {
    detailId: {
      type: String,
      default: null,
    },
  },

  watch: {
    detailId: {
      handler: function (val, oldVal) {
        if (val) {
          this.getDetail(val)
        }
      },
      deep: true,
      immediate: false,
    },
  },

  mounted() {},
  methods: {
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`
      } else {
        Toast('请在手机端使用此功能')
      }
    },
    getDetail(billId) {
      taskApi
        .getCustomerTaskById({ billId, userId: this.userId })
        .then((res) => {
          if (res.data) {
            console.log(res)
            this.dataSource = res.data
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.con_box {
  width: 100%;
  height: 5.5rem;
  background: #fff;
  margin-right: 0.2rem;
  box-sizing: content-box;
}
.com_title {
  position: relative;
  background: #dcdcdc;
  font-size: 0.32rem;
  padding: 0.2rem;
  &::before {
    content: '';
    background: #409eff;
    width: 4px;
    position: absolute;
    height: 20px;
    top: 7px;
    left: 0;
  }
}

.flex {
  display: flex;
  align-items: center;
}

// 联系人
.contactbox {
  background: #fff;
  padding: 0.1rem;
  box-sizing: border-box;

  .contactItem {
    justify-content: space-between;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;
    border: 1px dashed #409eff;
    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;
        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }
        .name {
          font-size: 0.28rem;
        }
      }
      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }
    .contact_rt {
      display: flex;
      align-items: center;
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }
      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        position: relative;
        top: -2px;
      }
    }
  }
}
</style>
